<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>






		<scroll-view scroll-y="true" class="contentOut" :style="'height:'+scrollViewHeight+'px'">
		<view class="Content">


				<view class="contentInner">

					<view class="contentInnerTitle">
						<text class="contentInnerTitleText">
							正在添加单扎数据
						</text>
					</view>

					<!-- 分扎信息内容列表  start-->

					<view class="content_gongxu">


						<view class="listContentGongxuContent" v-for="(itemOut,index) in listDataFenzha">


							<view class="listContentGongxu" v-for="(item,index1) in itemOut.data"
								@click="Fenzha(item,index)">

								<view class="contentItem" v-if="item.type==0">

									<view class="contentItemTextLeftContent">
										<text class="contentItemTextLeft">{{item.title}}</text>
										<text class="contentItemTextLeftStart">*</text>
									</view>
									<input class="contentItemTextRight" type="text" :value="item.Value"
										@input="onInputSplitting(index,index1,$event)" />


								</view>

								<view class="contentItem" v-if="item.type==4">

									<view class="contentItemTextLeftContent">
										<text class="contentItemTextLeft">{{item.title}} {{index+1}}</text>
										<text class="contentItemTextLeftStart">*</text>
									</view>
                  <input class="contentItemTextRight" type="text" :value="item.Value" @input="onInputBundleCode(index,index1,$event)" />
									<image class="contentItemTextLeftStartImg"
										src="../../../static/gongzuotai/shanchu-red.png" mode=""
										@click.stop="deleteDataFenZha(item,index)"></image>


								</view>


								<view class="contentItem2" v-if="item.type==1">

									<view class="contentItemTextLeftContent">
										<text class="contentItemTextLeft">{{item.title}}</text>
										<text class="contentItemTextLeftStart">*</text>
									</view>
									<input class="contentItemTextRight" type="text" :value="item.Value"
										@input="onInputSplitting(index,index1,$event)" />

								</view>



								<view class="contentItem2" v-if="item.type==2">

									<view class="contentItemTextLeftContent">
										<text class="contentItemTextLeft">{{item.title}}</text>
										<text class="contentItemTextLeftStart">*</text>
									</view>

									<view class="contentItemRightContent">
										<text class="contentItemTextLeft">{{item.Value}}</text>
										<image class="contentItemRightContentImg"
											src="/static/gongzuotai/xia_jiantou@2x.png" mode="">
										</image>
									</view>

								</view>


								<view class="line"></view>

							</view>
							<view class="lineBottom"></view>
						</view>



					</view>
					<!-- 分扎信息内容列表  end-->


					<!-- 添加分扎按键 start-->
					<view class="contentAddBtnOut">
						<view class="contentAddBtnInner" @click="AddFenZha()">
							<image class="contentAddBtnInnerImg" src="/static/gongzuotai/shangchuan.png" mode="">
							</image>
							<text class="contentAddBtnInnerText">添加分扎</text>
						</view>

					</view>
					<!--  添加分扎按键  end-->
				</view>

		</view>

	</scroll-view>

		<view class="loginContentGlobal" id="mainBottom" >

			<button  @click="addOrderSplittingUp" style="color:#ffffff" class="loginGlobal"
				type="default">{{login}}</button>
		</view>

		<!--尺码大小 点击列表弹出 start-->
		<uni-popup ref="popupBag" type="bottom">
			<view class="bagDetail">
				<text class="bagDetailUpadte">尺码大小</text>

				<!-- <view class="listContentSize" >
          <view class="listContentSizeInner" v-for="(item,index) in sizeListData">
            <text class="listContentSizeText">{{item.size}}</text>
          </view>
        </view> -->


				<view class="baseList">
					<view class="baseListItem" v-for="(item,index) in sizeListData" @click="sizeListItem(index)">

						<text v-if="item.select==false" class="baseListItemText">{{item.sizeName}}</text>
						<text v-else class="baseListItemTextSelect">{{item.sizeName}}</text>
					</view>
				</view>


				<view class="loginContent" @click="setSize()">

					<button style="color:#ffffff" class="login" type="default">{{login}}</button>
				</view>

			</view>
		</uni-popup>
		<!--尺码大小 点击列表弹出 end-->




		<!-- 颜色外观  start -->

		<uni-popup ref="popupColor" type="bottom">
			<view class="bagDetailColor">
				<text class="bagDetailUpadte">颜色外观</text>

				<!-- <view class="listContentSize" >
          <view class="listContentSizeInner" v-for="(item,index) in sizeListData">
            <text class="listContentSizeText">{{item.size}}</text>
          </view>
        </view> -->


				<view class="baseListColor">
					<view class="baseListItemColor">

						<!-- 左边颜色系列 -->

						<scroll-view scroll-y="true" class="baseListItemColorLeft">
							<view class="baseListItemColorLeft">

								<view class="baseListItemColorLeftInner" v-for="(item,index) in colorListData"
									@click="selectColor(item,index)">
									<view class="baseListItemColorLeftInnerItem">
										<!--										<view class="baseListItemColorLeftInnerBg"-->
										<!--											:style="{backgroundColor:item.color}">-->
										<!--										</view>-->
										<text v-if="item.select==true"
											class="baseListItemColorLeftInnerTextSelect">{{item.colorName}}</text>
										<text v-else class="baseListItemColorLeftInnerText">{{item.colorName}}</text>
									</view>
								</view>

							</view>

						</scroll-view>

						<!-- 右边颜色系列对应明细 -->
						<scroll-view scroll-y="true" class="baseListItemColorRight">
							<view class="baseListItemColorRight">





								<view class="baseListItemColorRightItem">
									<view class="baseListItemColorLeftInnerItemRight" v-for="(item,index) in colorList"
										@click="selectColorItem(item,index)">
										<!--										<view class="baseListItemColorLeftInnerBg"-->
										<!--											:style="{backgroundColor:item.color}"></view>-->
										<text v-if="item.select==true"
											class="baseListItemColorLeftInnerTextSelect">{{item.colorName}}</text>
										<text v-else class="baseListItemColorLeftInnerText">{{item.colorName}}</text>
									</view>
								</view>

							</view>

						</scroll-view>

					</view>
				</view>


				<view class="loginContent" @click="addClick()">

					<buttonc style="color:#ffffff" class="login" type="default">{{login}}</buttonc>
				</view>

			</view>
		</uni-popup>
		<!-- 颜色外观  end -->

	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	import {
		getColorGroupList,
		getColorManagerList,
		getSizeManagerList,
		addSplittingUpByList
	} from '@/pages/api/api.js'

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {

				login: '确定',

				title: '添加单个扎',
				isback: true,
				// 尺码列表
				sizeListData: [],

				colorList: [],
				// 临时选中的尺码
				selectSizeTemp: {},
				// 分扎中是第几个对象 默认是第一个
				fenZhaIndex: 0,

				// 颜色外观列表
				colorListData: [],

				// 分扎信息列表
				listDataFenzha: [],
				orderId: '',
				tenantId: '',
				storeId: '',

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,

			}
		},



		onLoad: function(option) {
			let item = JSON.parse(decodeURIComponent(option.item));
			console.log('item', item)
			this.orderId = item.orderId
			this.tenantId = item.tenantId
			this.storeId = item.storeId
			this.AddFenZha();
			this.getSizeList();
			this.getColorGroupList();
		},
		onReady() {

			// this.AddGongxu()
			// this.AddFenZha()
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);


			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);
				const app = getApp();

				this.scrollViewHeight = this.bottomTop - app.globalData.totalHeight
				// console.log('可滚动距离', this.scrollViewHeight,this.bottomTop,app.globalData.totalHeight);
			}).exec();



		},
		methods: {
			onInputSplitting(index, index1, e) {
				this.listDataFenzha[index].data[index1].Value = e.target.value
			},
      onInputBundleCode(index,index1,e){
        this.listDataFenzha[index].data[index1].Value=e.target.value
      },
			// 删除分扎
			deleteDataFenZha(item, index) {
				this.listDataFenzha = this.listDataFenzha.filter((data, Index) => {
					return index != Index;
				})

				console.log('删除操作1');
			},
			// 添加分扎
			AddFenZha() {
				let fenzhaData = {
					data: [{
							title: '扎号',
							Value: this.listDataFenzha.length+1,
							tableFie: '',
							type: 4
						},
						{
							title: '数量',
							Value: '',
							tableFie: 'quantity',
							type: 0
						},
						{
							title: '尺码大小',
							Value: '请选择',
							tableFie: 'sizes',
							type: 2
						},

						{
							title: '颜色外观',
							Value: '请选择',
							tableFie: 'colors',
							type: 2
						},
						{
							title: '床号批次',
							Value: '请填写',
							tableFie: 'batchs',
							type: 1
						}
					]
				}

				this.listDataFenzha.push(fenzhaData)

				// 设置序号
				console.log('121添加分扎', this.fenzhaData);
			},

			Fenzha(e, index) {
				console.log('Fenzha', e, index)
				this.fenZhaIndex = index
				switch (e.title) {
					case '尺码大小':
						this.open(e)
						break;

					case '颜色外观':
						this.openColor()
						break;
					default:
						break;
				}

			},
			// 打开尺码弹框
			open(e) {
				console.log('点了');
				this.$refs.popupBag.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e

				// 默认选中第一个
				this.sizeListData.forEach((item, index) => {
					if (index == 0) {
						item.select = true
					} else {
						item.select = false
					}
				})


			},
			// 关闭尺码弹框
			close() {
				this.$refs.popupBag.close()
			},

			// 打开颜色弹框
			openColor(e) {
				console.log('点了');
				this.$refs.popupColor.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e


				// 默认选中第一个
				this.colorListData.forEach((item, index) => {
					if (index == 0) {
						item.select = true

					} else {
						item.select = false
					}
				})
				this.colorList.forEach((item, index) => {
					if (index == 0) {
						item.select = true
					} else {
						item.select = false
					}
				})


			},
			// 关闭颜色弹框
			closeColor() {
				this.$refs.popupColor.close()
			},
			// 选择最终颜色
			addClick() {

				let select = '';

				this.colorList.forEach((item, index) => {
					// 表示点击选中
					if (item.select == true) {
						select = item
					}
				})
				if (select != '') {
					this.closeColor()
				} else {
					uni.showToast({
						title: '请选择颜色',
						icon: 'none'
					});
				}
				this.listDataFenzha[this.fenZhaIndex].data.forEach((item) => {
					if (item.title == '颜色外观') {

						// item.Value=select.sizeName
						this.$set(item, 'Value', select.colorName)
						console.log('2211颜色外观', this.listDataFenzha);
					}
				})

			},
			// 选择具体颜色
			selectColorItem(item, index) {
				this.colorList.forEach((e, Index) => {
					// 表示点击选中
					if (Index == index) {
						e.select = true
						console.log('22点击颜色', e, item);
					} else {
						e.select = false
					}

				})
			},
			// 选择左侧颜色系列
			selectColor(item, index) {

				this.colorListData.forEach((e, Index) => {
					// 表示点击选中
					if (Index == index) {
						e.select = true
						console.log('121点击颜色', e, item);

						this.getColorManagerList(e.id)

					} else {
						e.select = false
					}
				})

			},

			// 点击确认选择的尺寸
			setSize() {
				let select = '';

				this.sizeListData.forEach((item, index) => {
					// 表示点击选中
					if (item.select == true) {
						this.selectSizeTemp = item
						select = item
					}
				})
				if (select != '') {
					this.close()
				} else {
					uni.showToast({
						title: '请选择尺码',
						icon: 'none'
					});
				}


				this.listDataFenzha[this.fenZhaIndex].data.forEach((item) => {
					if (item.title == '尺码大小') {
						console.log('211尺码大小', this.fenZhaIndex);
						// item.Value=select.sizeName
						this.$set(item, 'Value', select.sizeName)
					}
				})



				console.log('1点击先选择尺寸', this.selectSizeTemp, this.listDataFenzha, this.listDataFenzha[this.fenZhaIndex]);
			},
			// 点击选择尺寸大小
			sizeListItem(e) {
				this.sizeListData.forEach((item, index) => {
					// 表示点击选中
					if (e == index) {
						item.select = true
						console.log('点击尺寸', e, item);
					} else {
						item.select = false
					}
				})
			},
			getSizeList() {
				let data = {
					storeId: this.storeId,
					tenantId: this.tenantId
				}
				getSizeManagerList(data).then(res => {
					if (res.code == 200) {
						this.sizeListData = res.data;
						//获取数据的时候foreach循环一下，添加select
						this.sizeListData.forEach((item, index) => {
							this.$set(item, 'select', false)
						})

					}
				})
			},
			getColorGroupList() {
				let data = {
					storeId: this.storeId,
					tenantId: this.tenantId
				}
				getColorGroupList(data).then(res => {
					if (res.code == 200) {
						this.colorListData = res.data;
						if (this.colorListData.length > 0) {
							//获取数据的时候foreach循环一下，添加select
							this.colorListData.forEach((item, index) => {
								this.$set(item, 'select', false)
							})
							let color = this.colorListData[0];
							this.getColorManagerList(color.id)
						}
					}
				})
			},
			getColorManagerList(groupId) {
				let data = {
					storeId: this.storeId,
					tenantId: this.tenantId,
					groupId: groupId
				}
				getColorManagerList(data).then(res => {
					if (res.code == 200) {
						this.colorList = res.data;
						//获取数据的时候foreach循环一下，添加select
						this.colorList.forEach((item, index) => {
							this.$set(item, 'select', false)
						})
					}
				})
			},
			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				// console.log('点击返回');
			},
			addOrderSplittingUp() {
				let data = {
					splittingUpList: [],
				}
				this.listDataFenzha.forEach(item => {
					let fz = {
						orderId: this.orderId,
						tenantId: this.tenantId,
						storeId: this.storeId,
            bundleCode: '1',
						quantity: '0',
						sizes: '',
						colors: '',
						batchs: '',
					}
					item.data.forEach(row => {
            if (row.tableFie == 'bundleCode') {
              fz.bundleCode = row.Value
            }
						if (row.tableFie == 'quantity') {
							fz.quantity = row.Value
						}
						if (row.tableFie == 'sizes') {
							fz.sizes = row.Value
						}
						if (row.tableFie == 'colors') {
							fz.colors = row.Value
						}
						if (row.tableFie == 'batchs') {
							fz.batchs = row.Value
						}
					})
					data.splittingUpList.push(fz)
					addSplittingUpByList(data).then(res => {
						if (res.code == 200) {
							this.backOnClick()
							// 显示提示信息
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}).catch((err) => {
						console.log('新增失败', err);
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.contentCenter {

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 768rpx;
		padding-top: 60rpx;
		padding-bottom: 20rpx;
	}


	.listContentGongxuContent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;

		background: #F5F7F9;
		border-radius: 30rpx;




	}

	.baseListItemColorRight {

		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 500rpx;

		height: 100%;
		flex-wrap: wrap;

		// background-color: #0AE1C6;
	}

	.baseListItemColorLeftInnerText {

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.baseListItemColorLeftInnerTextSelect {


		font-weight: 600;
		font-size: 24rpx;

		line-height: 100rpx;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background-color: red;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.baseListItemColorLeftInnerBg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-right: 18rpx;


	}

	.baseListItemColorLeftInnerItemSelect {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

		border-radius: 20rpx;
	}

	.baseListItemColorLeftInnerItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;


		border-radius: 20rpx;

	}

	.baseListItemColorLeftInnerItemRight {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 216rpx;
		height: 80rpx;
		background: #F5F7F9;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.baseListItemColorLeftInner {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		// justify-content: center;
		// align-items: center;

		width: 100%;
		height: 80rpx;
		margin-bottom: 20rpx;


	}

	.baseListItemColorLeft {
		display: flex;
		justify-content: flex-start;
		// align-items: center;
		flex-direction: column;
		width: 217rpx;
		height: 834rpx;
		background: #F5F7F9;

		border-radius: 20rpx;

	}

	.baseListItemColor {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		width: 750rpx;
		height: 834rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
	}


	.baseListItemText {

		font-size: 24rpx;
		color: #333333;
		line-height: 100rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 217rpx;
		height: 80rpx;
		background: #F5F7F9;
		border-radius: 20rpx;

	}

	.baseListItemTextSelect {
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 217rpx;
		height: 80rpx;
		background: red;
		border-radius: 20rpx;
		border: red solid 1rpx;


	}



	.baseListItemColorRightItem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		width: 100%;
		height: 100rpx;
		margin-left: 30rpx;

		// flex: 0 0 calc((100%)/2);




	}

	.baseListItem {
		display: flex;
		flex-direction: column;
		align-items: center;

		flex: 0 0 calc((100%)/3);
		margin-bottom: 20rpx;

	}


	.baseListColor {

		display: flex;
		flex-direction: column;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 29rpx;

	}

	.baseList {
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 29rpx;
	}

	.baseListColor {
		display: flex;
		flex-direction: row;
		width: 500rpx;
		flex-wrap: wrap;

	}




	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}

	.bagDetailColor {

		width: 750rpx;
		height: 1073rpx;


		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.bagDetail {
		width: 750rpx;
		height: 603rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;





	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;


	}

	.loginContentGlobal {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		position: absolute;
		bottom: 20rpx;
	}

	.loginGlobal {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		margin-bottom: 20rpx;


		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		margin-top: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);




	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		margin-bottom: 20rpx;


		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		margin-top: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.contentAddBtnOut {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 30rpx;

		.contentAddBtnInner {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 630rpx;
			height: 80rpx;
			background: #ECF5FD;
			border-radius: 20rpx;

			.contentAddBtnInnerImg {
				width: 22rpx;
				height: 22rpx;
			}

			.contentAddBtnInnerText {
				font-family: HarmonyOS Sans SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #333333;
				line-height: 30rpx;
			}
		}

	}



	.content_gongxu {
		width: 630rpx;

		background: #F5F7F9;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		margin-top: 50rpx;


	}



	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemTextLeftStartImg {
		width: 30rpx;
		height: 30rpx;
		margin-right: 30rpx;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 100rpx;


		/* background-color: aqua; */
	}



	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}


	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 100rpx;

		border-radius: 30rpx 30rpx 0 0;
		/* background-color: aqua; */

	}


	.contentItem4 {
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		/* background-color: bisque; */
	}

	.labelContent {
		font-size: 20rpx;
		font-weight: 600;
	}

	.contentItem3 {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-evenly;
		width: 100%;
		height: 100rpx;

	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 100%;
		height: 100rpx;

		border-radius: 30rpx 30rpx 0 0;
		/* background-color: aqua; */

	}

	.lineBottom {
		width: 100%;
		height: 20rpx;
		background: #FFFFFF;
	}

	.listContentGongxu {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;

		background: #F5F7F9;
		border-radius: 30rpx;



	}

	/* 	.content_gongxu {
		width: 630rpx;

		background: #F5F7F9;
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;


	} */



	.contentInnerTitle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.contentInnerTitleText {

		width: 278rpx;
		height: 27rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 60rpx;

		display: flex;
		justify-content: center;
		align-items: center;

	}

	.contentInner {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;

	}

	.contentOut {

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		width: 690rpx;

		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.Content {

		width: 690rpx;
		// height: 768rpx;
		background: #FFFFFF;

		border-radius: 30rpx;

		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
	}



	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}
</style>
